<template>
  <div class="app-container">
    <vxe-grid
      v-bind="gridOptions"
      ref="gridRef"
      @checkbox-change="selectChangeEvent"
    >
      <template #toolbarButtons>
        <vxe-button status="primary" @click="ToolbarBtnAdd">新增</vxe-button>
        <vxe-button
          status="success"
          @click="ToolbarBtnUpdate"
          :disabled="selectRecords.length != 1"
          >修改</vxe-button
        >
        <vxe-button
          status="error"
          @click="$refs.gridRef.commitProxy('delete')"
          :disabled="selectRecords.length == 0"
          >删除</vxe-button
        >
      </template>
    </vxe-grid>
    <add v-model="showPopup" title="新增" @confirm="confirmAdd"></add>
    <add
      v-model="showPopup1"
      title="修改"
      :formData="row"
      @confirm="confirmUpdate"
    ></add>
  </div>
</template>

<script>
import api from "@/api/api";

import add from "./add.vue";

export default {
  components: { add },
  data() {
    const imgUrlCellRender = {
      name: "VxeImage",
      props: {
        width: 36,
        height: 36,
      },
    };

    const gridOptions = {
      border: true,
      showOverflow: true,
      keepSource: true,
      height: 800,
      pagerConfig: {
        pageSize: 15,
      },
      editConfig: {
        trigger: "click",
        mode: "row",
        showStatus: true,
      },
      formConfig: {
        items: [
          {
            field: "name",
            title: "名称",
            span: 8,
            itemRender: { name: "VxeInput" },
          },
          {
            span: 8,
            align: "center",
            collapseNode: true,
            itemRender: {
              name: "VxeButtonGroup",
              options: [
                { type: "submit", content: "搜索", status: "primary" },
                { type: "reset", content: "重置" },
              ],
            },
          },
        ],
      },
      toolbarConfig: {
        buttons: [
          // { buttonRender: { name: "ToolbarBtnAdd" } },
          // { buttonRender: { name: "ToolbarBtnUpdate" } },
          // { code: "delete", status: "error", name: "删除" },
        ],
        slots: { buttons: "toolbarButtons" },
      },
      columns: [
        { type: "checkbox", width: 50 },
        { type: "seq", width: 70 },
        { field: "nbid", title: "nbid" },
        { field: "img1", title: "img1", cellRender: imgUrlCellRender },
        { field: "img2", title: "img2", cellRender: imgUrlCellRender },
        { field: "img3", title: "img3", cellRender: imgUrlCellRender },
      ],
      proxyConfig: {
        form: true,
        props: {
          result: "result",
          total: "total", // 配置响应结果总页数字段
        },
        ajax: {
          query: ({ page, form }) => {
            return api.get(page.pageSize, page.currentPage, form);
          },
          delete: ({ body }) => {
            // console.log(body.removeRecords);
            let nbids = body.removeRecords.map((m) => m.nbid);
            return api.delete({ nbids });
          },
          save: ({ body }) => {
            // 接收 Promise<any>
            return saveApi(
              body.pendingRecords,
              body.insertRecords,
              body.updateRecords
            );
          },
        },
      },
    };
    return {
      gridOptions,
      imgUrlCellRender,
      form: {},
      showPopup: false,
      showPopup1: false,

      selectRecords: [],
      row: {},
    };
  },
  methods: {
    confirmAdd(a) {
      console.log(a);
      console.log(1111111);
    },
    confirmUpdate(u) {
      console.log(u);
    },
    selectChangeEvent({ checked }) {
      const $grid = this.$refs.gridRef;
      if ($grid) {
        this.selectRecords = $grid.getCheckboxRecords();
        // console.log(checked ? "勾选事件" : "取消事件", records);
      }
    },

    ToolbarBtnAdd(row) {
      this.showPopup = true;
    },
    ToolbarBtnUpdate($grid) {
      this.showPopup1 = true;
      const selectRecords = this.$refs.gridRef.getCheckboxRecords();
      this.row = selectRecords[0];
      console.log(this.row);
      // VxeUI.modal.alert(`${selectRecords.length}条数据`);
    },
  },
  computed: {},
};
</script>
